<template>
    <div class="agent-all-list">
        <div class="agent-all-list-card">
            <div class="agent-all-list-head">
                <Row :gutter="5">
                    <Col span="4">
                        <DatePicker  clearable v-model="searchData.timeStartEnd" style="width: 100%" type="daterange" placeholder="时间筛选"></DatePicker>
                    </Col>
                    <Col span="4">
                        <Input clearable v-model="searchData.name" placeholder="地区名称" type="text"></Input>
                    </Col>
                    <Col span="4">
                        <Select clearable v-model="searchData.areaId1" placeholder="选择地址(省)" @on-change="getAreaId2">
                            <Option v-for="(value,key) in areaId1List" :value="value.areaid">{{value.areaname}}</Option>
                        </Select>
                    </Col>
                    <Col span="4">
                        <Select clearable v-model="searchData.areaId2" placeholder="选择地址(市)" @on-change="getAreaId3">
                            <Option v-for="(value,key) in areaId2List" :value="value.areaid">{{value.areaname}}</Option>
                        </Select>
                    </Col>
                    <Col span="4">
                        <Select clearable v-model="searchData.areaId3" placeholder="选择地址(县、区)">
                            <Option v-for="(value,key) in areaId3List" :value="value.areaid">{{value.areaname}}</Option>
                        </Select>
                    </Col>
                    <Col span="4">
                        <ButtonGroup class="subSearch">
                            <Button :loading="search_loading" @click="searchGetList" type="primary"><Icon type="ios-pulse-strong"></Icon> 筛 选</Button>
                            <Button type="primary" @click="add"><Icon type="plus-round"></Icon> 新增</Button>
                        </ButtonGroup>
                    </Col>
                </Row>
            </div>
            <i-table height="685" stripe :columns="columns" :data="data"></i-table>
            <div style="padding: 15px;">
                <Page @on-page-size-change="changeTiao" @on-change="changePage" :current="index" :total="total" show-elevator show-sizer :placement="'top'" :page-size="page_con" :page-size-opts="[10, 15, 20, 30, 40, 50]"></Page>
            </div>
        </div>
        <!--删除代理-->
        <Modal v-model="modal2" width="360">
            <p slot="header" style="text-align:center">
                <a>
                    <Icon type="information-circled"></Icon>
                    <span>删除确认</span>
                </a>
            </p>
            <div style="text-align:center">
                <p>是否继续删除？</p>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="del">删除</Button>
            </div>
        </Modal>
        <!--修改金额-->
        <Modal v-model="modal4" width="450">
            <p slot="header" style="text-align:center">
                <a><Icon type="plus-round"></Icon> 修改金额</a>
            </p>
            <Form style="margin-top: 20px" ref="formValidateChange" :model="formValidateChange" :rules="ruleValidateChange" :label-width="70">
                <FormItem label="金额:"  prop="number">
                    <Input v-model="formValidateChange.number" placeholder="请输入金额"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="changeDelivery">确定</Button>
            </div>
        </Modal>
        <!--新增-->
        <Modal v-model="modal3" width="450">
            <p slot="header" style="text-align:center">
                <a><Icon type="plus-round"></Icon> 新增</a>
            </p>
            <Form style="margin-top: 20px" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="选择省" prop="areaId1">
                    <Select clearable v-model="formValidate.areaId1" placeholder="选择地址(省)" @on-change="getAddAreaList2">
                        <Option v-for="(value,key) in addareaId1List" :value="value.areaid">{{value.areaname}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="选择市" prop="areaId2">
                    <Select clearable v-model="formValidate.areaId2" placeholder="选择地址(市)" @on-change="getAddAreaList3">
                        <Option v-for="(value,key) in addareaId2List" :value="value.areaid">{{value.areaname}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="选择县" prop="areaId3">
                    <Select clearable v-model="formValidate.areaId3" placeholder="选择地址(县、区)">
                        <Option v-for="(value,key) in addareaId3List" :value="value.areaid">{{value.areaname}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="金额:"  prop="money">
                    <Input v-model="formValidate.money" placeholder="请输入金额"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="addAgent">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    export default {
        name:"agent-all-list",
        data(){
            return{
                columns:[
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align:"center",
                    },
                    {
                        title: '省份',
                        key: 'aname',
                        align:"center",
                    },
                    {
                        title: '城市',
                        key: 'bname',
                        align:"center",
                    },
                    {
                        title: '县、区',
                        key: 'cname',
                        align:"center",
                    },
                    {
                        title: '金额',
                        key: 'money',
                        align:"center",
                        render:(h,params)=>{
                            return `￥ ${params.row.money}`
                        }
                    },
                    {
                        title: '添加时间',
                        key: 'add_time',
                        align:"center",
                        render:(h,params)=>{
                            return `${this.timeFormat(params.row.add_time)}`
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('ButtonGroup', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                    },
                                    on: {
                                        click: () => {
                                            this.formValidateChange.number=params.row.money
                                            this.id = params.row.agent_id
                                            this.modal4 = true
                                        }
                                    }
                                },"修改金额"),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                    },
                                    on: {
                                        click: () => {
                                            this.id = params.row.agent_id
                                            this.modal2 = true
                                        }
                                    }
                                }, '删 除')
                            ]);
                        }
                    },
                ],
                data:[],
                total:0,
                index:1,
                page_con:15,
                searchData:{
                    timeStartEnd:[],//两个时间内的赛选
                    name:"",//代理名
                    areaId1:"",//省
                    areaId2:"",//市
                    areaId3:"",//县
                },
                search_loading:false,
                areaId1List:[],//省级
                areaId2List:[],//市级
                areaId3List:[],//县
                id:"",//操作的id
                modal_loading:false,
                modal2:false,
                modal4:false,
                formValidateChange:{
                    number:"",//金额
                },
                ruleValidateChange:{
                    number: [
                        { required: true, message: '请输入金额', trigger: 'blur' },
                    ]
                },
                modal3:false,
                formValidate:{
                    money:"",//金额
                    areaId1:"",//省
                    areaId2:"",//市
                    areaId3:"",//县
                },
                ruleValidate:{
                    money: [
                        { required: true, message: '请输入金额', trigger: 'blur' },
                    ],
                    areaId1: [
                        { required: true, message: '选择省', trigger: 'change' },
                    ],
                    areaId2: [
                        { required: true, message: '选择市', trigger: 'change' },
                    ],
                    areaId3: [
                        { required: true, message: '选择县、区', trigger: 'change' },
                    ],
                },
                addareaId1List:[],//添加时省列表
                addareaId2List:[],//添加时市列表
                addareaId3List:[],//添加时县、区列表
            }
        },
        activated(){
            this.getAgentList()
            this.getAreaId1()
        },
        methods:{
            getAgentList(){
                this.getJsonData("Agent/getAllAgent",{
                    num:this.page_con,
                    page:this.index,
                    begin:this.searchData.timeStartEnd[0]?this.searchData.timeStartEnd[0]/1000:"",
                    last:this.searchData.timeStartEnd[1]?this.searchData.timeStartEnd[1]/1000:"",
                    name:this.searchData.name,
                    area_1:this.searchData.areaId1,
                    area_2:this.searchData.areaId2,
                    area_3:this.searchData.areaId3,
                },true)
                    .then((res)=>{
                        this.data=res.data
                        this.total=parseInt(res.count)
                        this.search_loading=false
                    })
                    .catch((res)=>{
                        this.search_loading=false
                    })
            },
            //获取省
            getAreaId1(){
                this.getJsonData("Areas/getAreas",{parentId:""})
                    .then((res)=>{
                        this.areaId1List = res.data
                    })
            },
            //获取市
            getAreaId2(){
                if(this.searchData.areaId1!==""){
                    this.getJsonData("Areas/getAreas",{parentId:this.searchData.areaId1})
                        .then((res)=>{
                            this.areaId2List = res.data
                        })
                }else{
                    this.areaId2List = []
                    this.areaId3List = []
                }
            },
            //获取县
            getAreaId3(){
                if(this.searchData.areaId2!==""){
                    this.getJsonData("Areas/getAreas",{parentId:this.searchData.areaId2})
                        .then((res)=>{
                            this.areaId3List = res.data
                        })
                }else{
                    this.areaId3List = []
                }
            },
            changePage(n){
                this.index=n
                this.getAgentList()
            },
            changeTiao(num){
                this.page_con=num
                this.index=1
                this.getAgentList()
            },
            searchGetList(){
                this.search_loading=true
                this.index=1
                this.getAgentList()
            },
            //删除
            del(){
                this.modal_loading = true;
                this.getJsonData("Agent/deleteAgentNow",{agent_id:this.id},true)
                    .then((res)=>{
                        this.getAgentList()
                        this.modal_loading = false;
                        this.modal2 = false;
                        this.$Message.success('删除成功');
                    }).catch((res)=>{
                    this.modal_loading = false;
                    this.modal2 = false;
                })
            },
            changeDelivery(){
                this.$refs.formValidateChange.validate((valid) => {
                    if (valid) {
                        this.sureChangeAgent()
                    }
                })
            },
            sureChangeAgent(){
                this.modal_loading = true;
                this.getJsonData("Agent/updateAgent",{
                    money:this.formValidateChange.number,
                    agent_id:this.id,
                },true)
                    .then((res)=>{
                        this.getAgentList()
                        this.modal_loading = false;
                        this.modal4 = false;
                        this.$Message.success('修改成功');
                    }).catch((res)=>{
                    this.modal_loading = false;
                    this.modal4 = false;
                })
            },
            //点击新增
            add(){
                this.formValidate.areaId1=""
                this.formValidate.areaId2=""
                this.formValidate.areaId3=""
                this.formValidate.money=""
                this.addareaId1List = []
                this.getAddAreaList1()
            },
            //获取新增的省
            getAddAreaList1(){
                this.getJsonData("Areas/getAreas",{parentId:""})
                    .then((res)=>{
                        this.addareaId1List = res.data
                        this.modal3 = true
                    })
            },
            //获取新增的市
            getAddAreaList2(){
                if(this.formValidate.areaId1!==""){
                    this.getJsonData("Areas/getAreas",{parentId:this.formValidate.areaId1})
                        .then((res)=>{
                            this.addareaId2List = res.data
                        })
                }else{
                    this.addareaId2List = []
                    this.addareaId3List = []
                }
            },
            //获取新增的县
            getAddAreaList3(){
                if(this.formValidate.areaId2!==""){
                    this.getJsonData("Areas/getAreas",{parentId:this.formValidate.areaId2})
                        .then((res)=>{
                            this.addareaId3List = res.data
                        })
                }else{
                    this.addareaId3List = []
                }
            },
            addAgent(){
                this.$refs.formValidate.validate((valid) => {
                    if (valid) {
                        this.sureAddAgent()
                    }
                })
            },
            sureAddAgent(){
                this.modal_loading = true;
                this.getJsonData("Agent/addAgentZong",{
                    consignee_add_countyId:this.formValidate.areaId1,
                    consignee_add_countyId2:this.formValidate.areaId2,
                    consignee_add_countyId3:this.formValidate.areaId3,
                    money:this.formValidate.money,
                },true)
                    .then((res)=>{
                        this.getAgentList()
                        this.modal_loading = false;
                        this.modal3 = false;
                        this.$Message.success('新增成功');
                    }).catch((res)=>{
                    this.modal_loading = false;
                    this.modal3 = false;
                })
            }
        },
    }
</script>
<style lang="less">
    @import "agent-all-list";
</style>